<template>
  <div class="GroupPagingInformation">
    <template>
      <el-tabs s v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
              <div style="min-height: 350px">
                <div class="option">
                  <div class="left">
                    <div class="title">档案号</div>
                    <div class="content">{{aa.tMemberId}}</div>
                  </div>
                  <div class="right">
                    <div class="title">姓名</div>
                    <div class="content">{{user.name}}</div>
                  </div>
                </div>
                <div class="option">
                  <div class="left">
                    <div class="title">性别</div>
                    <div class="content">{{user.sex==1?"男":"女"}}</div>
                  </div>
                  <div class="right">
                    <div class="title">年龄</div>
                    <div class="content">{{user.age}}</div>
                  </div>
                </div>
                <div class="textarea">
                  <div class="title">疾病史</div>
                  <textarea name="" v-model="aa.medicalHistory"></textarea
                  >
                </div>
                <div class="textarea">
                  <div class="title">遗传史</div>
                           <textarea name="" v-model="aa.familyHistory"></textarea>

                </div>
                <div class="textarea">
                  <div class="title">手术史</div>
                             <textarea name="" v-model="aa.previousHistory"></textarea>

                </div>
                <el-button class="but">取 消</el-button>
              </div>
        </el-tab-pane>
        <el-tab-pane label="体检信息" name="second">
       <table class="table table-hover">
	            <thead>
				<td v-for="(item) in this.src" :key="item.id">
				  <img style="height:109px" :src="'http://localhost:8085/img/'+(item.src)"/>
				</td>
	            </thead>
	        </table>
          <el-button class="but">取 消</el-button>
        </el-tab-pane>
        <el-tab-pane label="评估信息" name="third">
          <template>
            <el-table style="width: 100%" align="center" :data="tbodytypeValue">
              <el-table-column label="档案号" prop="tMemberId" width="120">
              </el-table-column>
              <el-table-column label="体检人姓名" prop="tBodyName" width="120">
              </el-table-column>
              <el-table-column
                label="体质评估时间"
                prop="createtime"
                width="180"
              >
              </el-table-column>
              <el-table-column label="气虚质" prop="tQiAsthenia" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.tQiAsthenia <= '2'"> 否 </span>
                  <span v-if="scope.row.tQiAsthenia > '2'"> 是 </span>
                </template>
              </el-table-column>
              <el-table-column label="阳虚质" prop="tYangQuality" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.tYangQuality <= '2'"> 否 </span>
                  <span v-if="scope.row.tYangQuality > '2'"> 是 </span>
                </template>
              </el-table-column>
              <el-table-column label="阴虚质" prop="tYinDeficiency" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.tYinDeficiency <= '2'"> 否 </span>
                  <span v-if="scope.row.tYinDeficiency > '2'"> 是 </span>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <template>
            <el-table
              style="width: 100%"
              align="center"
              :data="tmentalityValue"
            >
              <el-table-column label="档案号" prop="tMemberId" width="120">
              </el-table-column>
              <el-table-column
                label="体检人姓名"
                prop="tMemberName"
                width="120"
              >
              </el-table-column>
              <el-table-column
                label="心理评测时间"
                prop="createtime"
                width="180"
              >
              </el-table-column>
              <el-table-column label="是否强迫症化" prop="tOcd" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.tOcd <= '2'"> 否 </span>
                  <span v-if="scope.row.tOcd > '2'"> 是 </span>
                </template>
              </el-table-column>
              <el-table-column label="是否焦虑化" prop="tAnxiety" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.tAnxiety <= '2'"> 否 </span>
                  <span v-if="scope.row.tAnxiety > '2'"> 是 </span>
                </template>
              </el-table-column>
              <el-table-column label="是否恐怖化" prop="tTerror" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.tTerror <= '2'"> 否 </span>
                  <span v-if="scope.row.tTerror > '2'"> 是 </span>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-button class="but">取 消</el-button>
        </el-tab-pane>
        <el-tab-pane label="确认分类" name="fourth">
          <div class="radio">
            <div class="title">确认分类人群</div>
            <div class="radios">
              <div class="ra">
                <el-radio v-model="radio" label="高血压">高血压</el-radio>
              </div>
              <div class="ra">
                <el-radio v-model="radio" label="低血压">低血压</el-radio>
              </div>
              <div class="ra">
                <el-radio v-model="radio" label="高血脂">高血脂</el-radio>
              </div>
              <div class="ra">
                <el-radio v-model="radio" label="高血糖">高血糖</el-radio>
              </div>
              <div class="ra">
                <el-radio v-model="radio" label="脂肪肝">脂肪肝</el-radio>
              </div>
            </div>
          </div>

          <div class="radio">
            <label>健康管理师：</label>
            <template>
              <el-select v-model="value" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.healthMgrId"
                  :label="item.healthMgrName"
                  :value="item.healthMgrId"
                >
                </el-option>
              </el-select>
            </template>
          </div>
          <div class="but">
            <el-button>取 消</el-button>
            <el-button type="primary" @click.native="tijiao()">确 定</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      radio: "",
      activeName: "first",
      options: [],
      value: "",
       user: {
        sex: "",
        age: "",
        name: "",
        tmerber: "",
      },
       aa:[],
       src:[],
      tInterposeClassify: "",
      tbodytypeValue: [],
      tmentalityValue: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == "third") {
        this.selecttMentalityResult();
      } else if (tab.name == "fourth") {
        this.selectAllTHealthmgr();
      }else if(tab.name=="second"){
              this.chaImgALlLIst()
      }
    },
    selecttMentalityResult() {
      this.tbodytypeValue = [];
      this.tmentalityValue = [];
      let aa = {};
      let bb = {};
      axios
        .post("/api/lqHealth/selecttMentalityResultBytmerBer", {
          tMemberId: this.tInterposeClassify.tmemberId,
        })
        .then((res) => {
          aa = res.data.tbodyType;
          bb = res.data.tmentalityResult;
          this.tbodytypeValue.push(aa);
          this.tmentalityValue.push(bb);
        });
    },
    selectAllTHealthmgr() {
      this.options = [];
      axios.get("/api/lqHealth/selectAllTHealthmgr").then((res) => {
        res.data.forEach((element) => {
          let a = { healthMgrId: "", healthMgrName: "" };
          a.healthMgrId = element.healthMgrId;
          a.healthMgrName = element.healthMgrName;
          this.options.push(a);
        });
      });
    },
    tijiao() {
      if (this.radio != "" && this.value != "") {
        axios
          .post("/api/lqHealth/updateTinterposeClassifyByUdr", {
            tMemberId: this.tInterposeClassify.tiOrderno,
            value: this.value,
            radio: this.radio,
          })
          .then((res) => {
            if (res.data > 0) {
              this.$router.push(
                "/home/population?breadcrunmbName=健康干预,人群分类"
              );
              this.$message({
                type: "success",
                message: "保存成功!",
              });
            }
          });
      } else {
        this.$message({
          type: "error",
          message: "请选择!",
        });
      }
    },
        //查询病例信息
    selectdynamicinfo(payload){
              axios.get("/api/TMemberExaminationByidAll",{params:{id:payload}}).then(data=>{
                this.aa=data.data
        })
    },
       //查找体检信息
    chaImgALlLIst(){
         axios.get("/api/ImgALlLIst",{params:{"id":this.user.tmerber}}).then(data=>{
              this.src=data.data
            })
    }
  },
  created() {
    this.tInterposeClassify = this.$route.query.value;
    console.log(this.tInterposeClassify)
   this.selectdynamicinfo(this.tInterposeClassify.tiOrderno);
      this.user.name=this.tInterposeClassify.name
      this.user.sex=this.tInterposeClassify.sex
      this.user.age=this.tInterposeClassify.age
      this.user.tmerber=this.tInterposeClassify.tiOrderno
     if(this.tInterposeClassify.tiOrderno==null){
       this.$router.push("/home/population?breadcrunmbName=健康干预,人群分类")
     }
 
  },
};
</script>

<style scoped>
.option {
  margin-top: 10px;
  width: 100%;
  min-height: 50px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.option > div {
  width: 50%;
  height: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.option > div .title {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.option > div .content {
  width: calc(100% - 100px);

  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
}
.textarea {
  width: 100%;
  min-height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.textarea > div {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.textarea > textarea {
  width: calc(75% - 100px);
  min-height: 90px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.271);
  transition: 0.3s;
  outline: none;
  padding: 10px;
}
.textarea > textarea:focus {
  border-color: #409eff;
}

.radio {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.radio .title {
  width: 100px;
  height: 50px;
}
.radio .radios {
  width: calc(100% - 100px);

  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
}
.radio .radios .ra {
  width: 10%;
  height: 20px;
  margin-left: 10px;
  padding: 0px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.but {
  float: right;
}
</style>
